<div class="container">
  <h1>Hero Detail</h1>
  <h3><i>FormControl in a FormGroup</i></h3>
  <form [formGroup]="heroForm" novalidate>
    <div class="form-group">
      <label class="center-block">Name: <p>{{ heroForm.get('name').value }}</p>
        <input class="form-control" formControlName="name">
      </label>
    </div>
    <div formGroupName="address" class="well well-lg">
      <h4>Secret Lair</h4>
      <div class="form-group">
        <label class="center-block">Street: <p>{{ heroForm.get('address.street').value}}</p>
          <input class="form-control" formControlName="street">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">City:
          <input class="form-control" formControlName="city">
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">State:
          <select class="form-control" formControlName="state">
            <option *ngFor="let state of states" [value]="state">{{state}}</option>
          </select>
        </label>
      </div>
      <div class="form-group">
        <label class="center-block">Zip Code:
          <input class="form-control" formControlName="zip">
        </label>
      </div>
    </div>
    <div class="form-group radio">
      <h4>Super power:</h4>
      <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
      <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
      <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
    </div>
    <div class="checkbox">
      <label class="center-block">
        <input type="checkbox" formControlName="sidekick">I have a sidekick.
      </label>
    </div>
  </form>
  <p>Form value: {{ heroForm.value | json }}</p>
  <p>Form status: {{ heroForm.status | json }}</p>
</div>
